<template>
    <div class="footer">
       <div v-for="item in tabs" :key="item.name" class="footer-item other-tab" :class="{'active': activeTab === item.name}" @click="handleTabClick(item.name)">
          <div>{{ item.name }}</div>
       </div>
    </div>
</template>
<script setup lang="ts">
import { ref,watch } from "vue";
import { useRouter,useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const tabs = ref([
    
    
    // {
    //     name: "生态宜居",
    //     path: "/ecological"
    // },
    // {
    //     name: "健康舒适",
    //     path: "/health"
    // },
    // {
    //     name: "安全韧性",
    //     path: "/safety"
    // },
    // {
    //     name: "交通便捷",
    //     path: "/traffic"
    // },
    {
        name: "首页",
        path: "/index"
    },
    // {
    //     name: "风貌特色",
    //     path: "/feature"
    // },
    // {
    //     name: "整洁有序",
    //     path: "/orderly"
    // },
    // {
    //     name: "多元包容",
    //     path: "/diverse"
    // },
    // {
    //     name: "创新活力",  
    //     path: "/innovation"
    // },
    {
        name: "数据管理",
        path: "/dataManage"
    }
])

const activeTab = ref('首页');

const handleTabClick = (name: string) => {
    activeTab.value = name;
    router.push(tabs.value.find(item => item.name === name)?.path || '/');
}

watch(() => route.path, (newPath) => {
    console.log(newPath);
    activeTab.value = tabs.value.find(item => item.path === newPath)?.name || '首页';
}, { immediate: true,deep:true })
</script>
<style scoped lang="scss">
.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    .footer-item{
        position: relative;
        bottom:20px;
        background-color: #3a558f;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        margin-right: 20px;
        font-size: 18px;
        font-weight: bold;
        transition: all 0.3s;
        position: relative;
        padding: 0 60px;
        &:last-child{
            margin-right: 0;
        }
        &.other-tab{
            width: 180px;
            // flex:1;
            padding: 4px 0;
        }
        &:hover{
            background: linear-gradient(135deg, #00d4ff, #0099cc);
            box-shadow: 0 0 20px #00d4ff99;
        }
        &.active{
            box-shadow: 0 0 30px #00d4ffff;
            background: linear-gradient(135deg, #00d4ff, #00ff88);
        }
        &.home-tab{
            position: relative;
            bottom: -12px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            box-sizing: border-box;
          

            z-index: 10;
            border: 3px solid #fff;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-15px);
            transition: all 0.3s;
            padding: 0;
            &:hover{
                background: linear-gradient(135deg, #00d4ff, #0099cc);
                box-shadow: 0 0 20px #00d4ff99;
            }
            &.active{
                box-shadow: 0 0 30px #00d4ffff;
                background: linear-gradient(135deg, #00d4ff, #00ff88);
            }
        }
    }
}
</style>